<!-- 课程打卡		Course -->
<template>
	<view class="warps">
		<view class="punch-top">
			<view class="w90 f b c p_t_20">
				<view class="">
					<text class="fs28 bold">选择打卡课程</text>
				</view>	
				<view class="vw55 f b c">
					<view :class="DC==0?'hei':'hui'" @click="DCs(0)">
						<text>课程</text>
					</view>
					<view :class="DC==1?'hei':'hui'" @click="DCs(1)">
						<text>课程</text>
					</view>
					<view :class="DC==2?'hei':'hui'" @click="DCs(2)">
						<text>课程</text>
					</view>
					<view :class="DC==3?'hei':'hui'" @click="DCs(3)">
						<text>课程</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-daka" v-show="DC == 0">
			<view class="w90 f b c">
				<view class="f d p_t_60">
					<text class="fs36 bold">日期日期日期日期</text>
					<text class="fs28 p_t_60">日期日期日期日期</text>
				</view>
				<view class="punch-daka-lan">
					<view class="f d c p_t_40">
						<text class="fs32 white">上课打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-daka" v-show="DC == 1">
			<view class="w90 f b c">
				<view class="f d p_t_60">
					<text class="fs36 bold">日期日期日期日期</text>
					<text class="fs28 p_t_60">日期日期日期日期</text>
				</view>
				<view class="punch-daka-lan">
					<view class="f d c p_t_40">
						<text class="fs32 white">下课打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-daka" v-show="DC == 2">
			<view class="w90 f b c">
				<view class="f d p_t_60">
					<text class="fs36 bold">日期日期日期日期</text>
					<text class="fs28 p_t_60">日期日期日期日期</text>
				</view>
				<view class="punch-daka-lan">
					<view class="f d c p_t_40">
						<text class="fs32 white">上课打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-daka" v-show="DC == 3">
			<view class="w90 f b c">
				<view class="f d p_t_60">
					<text class="fs36 bold">日期日期日期日期</text>
					<text class="fs28 p_t_60">日期日期日期日期</text>
				</view>
				<view class="punch-daka-lan">
					<view class="f d c p_t_40">
						<text class="fs32 white">下课打卡</text>
						<text class="fs16 white p_t_20">时间时间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="punch-buttom">
			<view class="w90">
				<view class="punch-buttom-jin senter">
					<text>今天</text>
				</view>
				<view class="f b c p_t_25">
					<view class="vw15 f c">
						<text class="fs16 blue">14:32</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
				<view class="f b c p_t_25">
					<view class="vw15 f c">
						<text class="fs16 blue">14:32</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
			</view>
			<view class="w90">
				<view class="punch-buttom-jin senter">
					<text>日期</text>
				</view>
				<view class="f b c p_t_40">
					<view class="vw15 f c">
						<text class="fs16 blue">10:12</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
				<view class="f b c p_t_25">
					<view class="vw15 f c">
						<text class="fs16 blue">14:32</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
				<view class="f b c p_t_25">
					<view class="vw15 f c">
						<text class="fs16 blue">14:32</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
			</view>
			<view class="w90">
				<view class="punch-buttom-jin senter">
					<text>日期</text>
				</view>
				<view class="f b c p_t_40">
					<view class="vw15 f c">
						<text class="fs16 blue">10:12</text>
						<view class="landian m_l_10"></view>
					</view>
					<view class="punch-buttom-boxy">
						<text class="fs24 hui">上课打卡成功，奖励积分 1 分</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DC: 0, //  0:上课   1:课后
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '我要打卡'
			})
		},
		methods: {
			DCs(e) {
				this.DC = e
			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #fff;
	}
	.punch-top{
		width:750;
		height: 80rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
	}
	.punch-daka{
		width: 750rpx;
		height: 352rpx;
		opacity: 1;
		background: #f6f8fc;
		margin:0 auto;
		overflow:hidden;
	}
	.punch-daka-lan{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin:0 auto;
		margin-top:80rpx;
	}
	.punch-buttom{
		width: 686rpx;
		height: 980rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.12); 
		margin:0 auto;
		margin-top:24rpx;
		overflow:hidden;
	}
	.punch-buttom-jin{
		width: 120rpx;
		height: 48rpx;
		line-height:48rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 24rpx;
		margin-top:32rpx;
	}
	.landian{
		width: 16rpx;
		height: 16rpx;
		opacity: 1;
		background: #ffffff;
		border: 1rpx solid #1f73f2;
		border-radius: 50%;
	}
	.punch-buttom-boxy{
		width: 502rpx;
		height: 82rpx;
		line-height:82rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding-left:24rpx;
	}
</style>

